﻿@{
    ViewBag.Title = "角色管理";
    Layout = "~/Views/Shared/_TreeLayout.cshtml";
}


<!--树-->


<!--Operation-->
<div class="heading-buttons">


    <div class="col-xs-12 col-sm-7 col-md-7 col-lg-4">
        <h1 class="page-title txt-color-blueDark"><i class="fa  fa-pencil "></i>
            角色管理			
        </h1>
    </div>
    <div class="buttons pull-right">

        <button type="button" class="btn btn-success btn-labeled " id="btnSysRoleAdd"
            data-bind="click: $root.AddNewNode">
            <span class="btn-label"><i class="glyphicon glyphicon-plus"></i>
            </span>新建角色</button>

        <button type="button" class="btn btn-primary btn-labeled " id="btnSysRoleDel"
            data-bind="click: $root.DelNode">
            <span class="btn-label"><i class="glyphicon glyphicon-remove"></i>
            </span>删除角色</button>


    </div>
    <div style="clear: both;">
    </div>
</div>
<!--/Operation-->


<hr class="separator" />
<!-- Bread crumb is created dynamically -->



<div class="row">

    <div class="col-sm-6" style="margin-bottom: 5px; margin-top: 5px;">
        <div class="well well-light well-sm no-margin no-padding treeContent">
            <!--SysRole tree-->
            <ul id="SysRoleTree" class="ztree">
            </ul>
        </div>

    </div>
    <!-- end col-sm-61 -->
    <!--/SysRole tree-->

    <!--SysRole  information-->
    <div class="col-sm-6" style="margin-bottom: 5px; margin-top: 5px;">
        <div class="well well-light well-sm no-margin no-padding treeContent">
            <input type="hidden" id="hidId" />
            <form class="form-horizontal" id="frmSysRole" data-bind="with: NodeValue">

                <fieldset>
                    <div class="row" style="border-bottom: dashed 1px; margin-bottom: 10px;">
                        <h3 style="padding: 10px 0 10px 10px; float: left;"><strong>详细信息</strong></h3>
                        <div class="buttons pull-right">

                            <button type="button" id="btnSysRoleUpdate" class="btn btn-success btn-labeled " style="margin-top: 5px;" data-bind="click: $root.updateNode">
                                <span class="btn-label"><i class="fa fa-save"></i>
                                </span>保存</button>

                        </div>
                    </div>

                    <div style="clear: both;" />


                     <input type='hidden' id='txtbId' name='txtbId' placeholder='' class='form-control' data-bind='value:Id' />

                    <div class='form-group'>
                        <label class='col-md-2 control-label' style='margin-bottom: 3px;'>角色名称:</label><div class='col-md-9'>
                            <input type='text' id='txtbSRoleName' name='txtbSRoleName' placeholder='' class='form-control' data-bind='value:SRoleName' />
                        </div>
                    </div>
                    <div class='form-group'>
                        <label class='col-md-2 control-label' style='margin-bottom: 3px;'>角色描述:</label><div class='col-md-9'>
                            <input type='text' id='txtbSDis' name='txtbSDis' placeholder='' class='form-control' data-bind='value:SDis' />
                        </div>
                    </div>

                    <div class='form-group'>
                        <label class='col-md-2 control-label' style='margin-bottom: 3px;'>拥有权限:</label><div class='col-md-6'>
                            <input type='text' id='txtbSPower' name='txtbSPower' placeholder='' class='form-control' data-bind='value:SPower' />
                        </div>                      
                        <a href="#myModal"  role="button" class="btn btn-default" data-toggle="modal"><i class="fa fa-cog"></i>选择权限</a>
                    </div>


                     <input type='hidden' id='txtbILevel' name='txtbILevel' placeholder='' class='form-control' data-bind='value:ILevel' />
            
                       <input type='hidden' id='txtbIParentId' name='txtbIParentId' placeholder='' class='form-control' data-bind='value:IParentId' />

              
                </fieldset>
            </form>
        </div>
    </div>
</div>
<!-- end row -->
<!--/SysRole information-->


<!--Power tree-->
<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="width:600px;">
    <div class="modal-content">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="myModalLabel"><strong>角色权限设置</strong></h3>
    </div>
    <div class="modal-body">        
        <ul id="Powertree" class="ztree"></ul>
    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">取消</button>
        <button class="btn btn-primary" id="confirm_power">授权</button>
    </div>
        </div>
</div>


<script type="text/javascript">

    var viewModel;
    $(function () {


        var options = {


            renderDiv: $("#SysRoleTree"),
            hidId: $("#hidId"),
            frmElement: $("#frmSysRole"),



            UpdateBtn: $("#btnSysRoleUpdate"),
            AddBtn: $("#btnSysRoleAdd"),
            DelBtn: $("#btnSysRoleDel"),


            //节点数据
            NodeValue: ko.observable({

                Id: 0, SRoleName: '', SDis: '', SMem: '', SPower: '', ILevel: 0, IParentId: 0

            }),

            //用户查询URL
            dataQueryUrlAccessor: function () { return "/api/SysRole/TreeAll"; },

            //添加用户URL
            dataAddUrlAccessor: function (key) { return "/api/SysRole/AddTreeNode/" + key; },
            dataUpdateAccessor: function (key) { return "/api/SysRole/Put/" + key; },
            dataDeleteAccessor: function (key) { return "/api/SysRole/Delete/" + key;},
            dataNodeSelect: function (id) {return "/api/SysRole/get/" + id;}

			, showDlgBefore: function () {
			    //显示对话框之前

			}
                , showDetailEnd: function (data) {


                }
             , changeEnd: function (key, event) {
                 //对话框保存的后置事件
             }, initEd: function () {
                 //gird初始化的后置事件 信息

             }

        };

        viewModel = new ViewModel(options);

        viewModel.init();
        ko.applyBindings(viewModel);



        options.frmElement.validate({
            rules: {


                txtbId: { required: true, digits: true }, txtbSRoleName: { maxlength: 50 }, txtbSDis: { maxlength: 50 }, txtbSMem: { maxlength: 50 },  txtbILevel: { digits: true }, txtbIParentId: { digits: true }



            },
            messages: {


                txtbId: { required: '必填项', digits: '必须是整数' }, txtbSRoleName: { maxlength: '最大长度为200' }, txtbSDis: { maxlength: '最大长度为16' }, txtbSMem: { maxlength: '最大长度为500' },  txtbILevel: { digits: '必须是整数' }, txtbIParentId: { digits: '必须是整数' }

            }
        });

        //获取PowerTree数据并显示
        $.ajax({
            type: "post",
            url: "/Api/SysPagePower/TreeAll"
        }).done(function (data) {
            var setting = {
                view: {
                    showIcon: true
                },
                check: {
                    enable: true,
                    chkboxType: { "Y": "s", "N": "" }  //勾选时，父关联子
                },
                data: {
                    simpleData: {
                        enable: true
                    }
                }
            };

            //打开Power树
            for (var i in data) {
                data[i].open = true;
            }
            var treeNodes = data;
            $.fn.zTree.init($("#Powertree"), setting, treeNodes);
        });

        //组装选中的权限id
        $("#confirm_power").click(function () {
            var PowerIds = "";
            var zTree = $.fn.zTree.getZTreeObj("Powertree");
            var check = zTree.getCheckedNodes(true);//取得所有被选中节点数据
            for (var i in check) {
                PowerIds = PowerIds + "," + check[i].id;
            }
            PowerIds = dropRsplit(PowerIds, ",");//去除多余的','分割符
            options.NodeValue().SPower = PowerIds;//将组装后的权限id绑定到NodeValue的SPower上
            $("#txtbSPower").val(PowerIds);//将组装后的权限id显示到SPower的input框中            


            //隐藏对话框并取消遮罩
            $("#confirm_power").attr("data-dismiss","modal");
            $("#confirm_power").attr("aria-hidden","true");
        });
    });

    //去除多余的分割符，例如：",a",结果为"a"
    function dropRsplit(a, splitC) {
        var tmpA = a.split(splitC);
        var tmpObj = new Array();
        for (var i = 0; i < tmpA.length; i++) {
            if (tmpA[i] != "") {
                tmpObj.push(tmpA[i]);
            }

        }
        return tmpObj.join(splitC);
    }

</script>




<!--end 树code-->


